<template>
  <div class="login">
    <div class="hi">
      <div class="hi_1">您好，</div>
      <div class="hi_2">欢迎来到温州非遗go</div>
    </div>
    <div class="form_set">
      <van-form @submit="onSubmit">
        <div class="label">用户名</div>
        <van-field v-model="form.username" name="username" label="" placeholder="请输入用户名"
          :rules="[{ required: true }]" />
        <div class="label">手机号</div>
        <van-field v-model="form.mobile" name="mobile" label="" placeholder="请输入手机号" maxlength="11"
          :rules="[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' }]" />
        <!-- <div class="label">验证码</div>
        <van-field v-model="form.code" type="text" name="code" label="" placeholder="请输入手机验证码" :rules="[{ required: true, message: '请输入手机验证码' }]">
          <template slot="extra">
            <span class="verification_code">获取验证码</span>
          </template>
        </van-field> -->
        <div class="label">密码</div>
        <van-field v-model="form.password" :type="passwordType" name="password" label="" placeholder="设置密码" />
        <!-- <div class="no_code">无法获取验证码？</div> -->
        <div class="login_btn">
          <van-button round block type="info" native-type="submit">注册</van-button>
          <div class="on_login" @click="onLogin">已有账号去登录</div>
        </div>
        <div class="clause">注册代表您已同意<span>《智联服务协议》</span>和<span>《隐私条款》</span></div>
      </van-form>
    </div>

  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
import { postzhuce } from "@/api/api.js";

export default {
  name: '',
  data() {
    return {
      form: {
        username: '',
        password: '',
        mobile: '',
        code: '',
      },
      passwordType: 'password',

    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    async onSubmit() {
      var regex = new RegExp("^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=])(?=\\S+$).{8,16}$");

      if (!regex.test(this.form.password)) {
        Toast('密码强度太弱，至少包含：大小写英文字母、数字、特殊符号,密码长度大于8位,小于16位!')
        return
      }
      let res = await postzhuce({
        yhm: this.form.username,
        pwd: this.$md5(this.form.password),
        sjhm: this.form.mobile
      });
      console.log('res==', res);
      if (res.data.code == 200) {
        localStorage.setItem('userlogin', JSON.stringify(res.data))
        Toast('注册成功！');
        this.$router.push({ path: "/home", query: {} });
      } else {
        Toast(res.data.msg);
      }
    },
    onSignIn() {
      this.$router.push({ path: '/signIn', query: { id: '1' } })
    },
    onLogin() {
      this.$router.push({ path: '/index', query: { id: '1' } })
    }
  },
}
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/images/bg.png') no-repeat;
  background-size: 100% 100%;

  .hi {
    margin-left: 1.625rem;
    padding-top: 7rem;

    .hi_1 {
      font-size: 1.5rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 2.0625rem;
    }

    .hi_2 {
      font-size: 1.25rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #3D3D3D;
      line-height: 1.125rem;
      padding-top: .625rem;
    }
  }

  .form_set {
    width: 100%;
    height: 24.0625rem;
    background: #fff;
    border-radius: 1.25rem 1.25rem 0px 0px;
    margin-top: 1.6875rem;

    .van-form {
      padding: 0 .9375rem;
      padding-top: 1rem;

      .label {
        font-size: 1rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 1.5rem;
        padding-top: .625rem;
        padding-left: 15px;
      }

      ::v-deep .van-button--info {
        background: #6CAAFE;
        border: #6CAAFE;
        box-shadow: 0px .125rem .25rem 0px rgba(108, 170, 254, 0.3);
      }

      ::v-deep .van-button__text {
        font-size: .875rem;
      }

      .verification_code {
        font-size: .75rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #6CAAFE;
        line-height: 1.125rem;
      }

      .no_code {
        font-size: .75rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 1.125rem;
        padding-top: .9375rem;
        padding-right: 1.25rem;
        text-align: right;
      }

      .on_login {
        font-size: .875rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #6CAAFE;
        line-height: 1.375rem;
        padding-top: 1rem;
        text-align: center;
      }

      .clause {
        font-size: .75rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        text-align: center;
        margin-top: 2.5rem;
        padding-bottom: 1.25rem;

        span {
          color: #666;
        }
      }

      .login_btn {
        margin: 0 16px;
        margin-top: 3.625rem;

        .zc {
          font-size: .875rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #6CAAFE;
          line-height: 1.375rem;
          text-align: center;
          padding-top: 1.4375rem;
        }
      }
    }
  }
}
</style>